<template>
  <view class="container">
    <!-- 提示信息 -->
    <text class="texttips">
      温馨提示：请勿发布涉及色情、暴力、政治等不良信息，否则将进行封禁处理。
    </text>

    <!-- 帖子标题输入框 -->
    <view class="form-group">
      <text class="form-label">标题：</text>
      <!-- 标题输入框，绑定 v-model -->
      <textarea
        class="title-input"
        v-model="title"
        maxlength="10"
        placeholder="请输入标题，最多10个字"
      ></textarea>
      <!-- 显示字符计数 -->
      <text class="char-count">{{ title.length }}/10</text>
    </view>

    <!-- 帖子内容输入框 -->
    <view class="form-group">
      <text class="form-label">内容：</text>
      <!-- 内容输入框，绑定 v-model -->
      <textarea
        class="content-input"
        v-model="content"
        maxlength="500"
        placeholder="请输入内容，最多500个字"
      ></textarea>
      <!-- 显示字符计数 -->
      <text class="char-count">{{ content.length }}/500</text>
    </view>

    <!-- 图片/���频上传区域 -->
    <view class="upload-section">
      <text class="form-label">上传图片或视频：</text>
      <!-- 图片/视频网格布局 -->
      <view class="media-grid">
        <!-- 循环渲染已上传的图片/视频 -->
        <block v-for="(item, index) in mediaList" :key="index">
          <view class="media-item">
            <!-- 显示图片 -->
            <image v-if="item.type === 'image'" :src="item.url" class="media-image" />
            <!-- 显示视频 -->
            <video v-if="item.type === 'video'" :src="item.url" class="media-video" controls />
            <!-- 删除按钮 -->
            <view class="delete-btn" @click="removeMedia(index)">×</view>
          </view>
        </block>
        <!-- 添加媒体文件按钮 -->
        <view v-if="mediaList.length < 9" class="media-item add-btn" @click="chooseMedia">
          +
        </view>
      </view>
      <!-- 显示已上传数量 -->
      <text class="upload-limit">已上传：{{ mediaList.length }}/9</text>
    </view>

    <!-- 发布按钮 -->
    <view class="form-group">
      <button class="submit-btn" @click="submitPost">发布</button>
    </view>
  </view>
</template>

<script>
// 引入相关接口
import releaseApi from '@/api/releaseApi.js';
import authApi from '@/api/authApi.js';

export default {
  data() {
    return {
      title: '', // 帖子标题
      content: '', // 帖子内容
      mediaList: [], // 媒体文件列表（图片或视频）
    };
  },
  onShow() {
    // 页面展示时，检查用户登录状态
    const app = getApp();
    if (!app.globalData.isLoggedIn) {
      const token = uni.getStorageSync('token');
      if (!token) {
        // 如果未登录，则跳转到个人中心页面
        uni.switchTab({
          url: '/pages/mine/mine',
        });
        return;
      }
    }
  },
  methods: {

    // 打开选择媒体文件的操作菜单
    chooseMedia() {
      if (this.mediaList.length >= 9) {
        // 限制最多上传 9 个媒体文件
        uni.showToast({ title: '最多上传9个媒体文件', icon: 'none' });
        return;
      }
      uni.showActionSheet({
        itemList: ['上传图片', '上传视频'], // 操作选项
        success: (res) => {
          // 根据用户选择，调用对应的图片或视频上传方法
          if (res.tapIndex === 0) {
            this.chooseImage();
          } else if (res.tapIndex === 1) {
            this.chooseVideo();
          }
        },
      });
    },
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 9 - this.mediaList.length, // 限制选择数量
        success: (res) => {
          // 将选中的图片文件添加到媒体列表中
          res.tempFilePaths.forEach((filePath) => {
            if (this.mediaList.length < 9) {
              this.mediaList.push({ type: 'image', url: filePath });
            }
          });
        },
      });
    },
    // 选择视频
    chooseVideo() {
      uni.chooseVideo({
        success: (res) => {
          // 将选中的视频文件添加到媒体列表中
          if (this.mediaList.length < 9) {
            this.mediaList.push({ type: 'video', url: res.tempFilePath });
          }
        },
      });
    },
    // 移除媒体文件
    removeMedia(index) {
      this.mediaList.splice(index, 1); // 根据索引从列表中移除
    },

     // 发布帖子
     async submitPost() {
       console.log('开始执行发布操作');
       
       // 检查标题是否为空
       if (!this.title.trim()) {
         uni.showToast({ title: '标题不能为空', icon: 'none' });
         return;
       }
       // 检查内容是否为空
       if (!this.content.trim()) {
         uni.showToast({ title: '内容不能为空', icon: 'none' });
         return;
       }
     
       console.log('准备上传图片，当前mediaList:', this.mediaList);
     
       try {
         // 上��图片并获取图片 ID 列表
         const imageIds = [];
         for (const media of this.mediaList) {
           if (media.type === 'image') {
             try {
               console.log('开始上传图片:', media.url);
               const res = await authApi.uploadAvatar(media.url);
               console.log('图片上传响应:', res);
               if (res.code === 1 && res.data) {
                 imageIds.push(res.data);
               }
             } catch (error) {
               console.error('图片上传失败:', error);
               uni.showToast({ title: '图片上传失败', icon: 'none' });
               return;
             }
           }
         }
     
         console.log('图片上传完成，imageIds:', imageIds);
     
         // 构造请求参数
         const params = {
           tittle: this.title.trim(),
           text: this.content.trim(),
           imageId: imageIds,
         };
     
         console.log('准备发送请求，参数:', params);
     
         try {
           console.log('开始调用 releaseApi.save');
           const res = await releaseApi.save(params);
           console.log('releaseApi.save 返回值:', res);
     
           // 先清空表单数据
           this.title = '';
           this.content = '';
           this.mediaList = [];
           
           // 设置全局刷新标记
           const app = getApp();
           if (app.globalData) {
             app.globalData.needRefreshMine = true;
           }
           
           // 显示成功提示
           uni.showToast({ 
             title: '发布成功', 
             icon: 'success',
             mask: true,
             duration: 1500
           });
           
           // 延迟跳转
           setTimeout(() => {
             uni.switchTab({
               url: '/pages/mine/mine',
               fail: (err) => {
                 console.error('switchTab失败，尝试使用reLaunch:', err);
                 uni.reLaunch({
                   url: '/pages/mine/mine'
                 });
               }
             });
           }, 1600);
     
         } catch (error) {
           console.error('发布请求失败:', error);
           uni.showToast({
             title: error.message || '发布失败，请重试',
             icon: 'none'
           });
         }
       } catch (error) {
         console.error('发布过程出现异常:', error);
         uni.showToast({
           title: '发布失败，请重试',
           icon: 'none'
         });
       }
     }


  },
};
</script>

<style scoped>
.container {
  padding: 15px; /* 内边距 */
  background-color: #f7f7f7; /* 背景色 */
  min-height: 100vh; /* 最小高度，填充整个屏幕 */
}
.texttips {
  font-size: 16px; /* 字体大小 */
  color: red; /* 字体颜色 */
}
.form-group {
  margin-bottom: 20px; /* 底部间距 */
}
.form-label {
  font-size: 25px; /* 标签字体大小 */
  font-weight: bold; /* 加粗 */
  margin-bottom: 8px; /* 标签和输入框的间距 */
  display: block; /* 块级显示 */
}
.title-input,
.content-input {
  width: 100%; /* 宽度填充父容器 */
  padding: 10px 15px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 10px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  background-color: #f9f9f9; /* 背景色 */
  resize: none; /* 用调整大小 */
  transition: all 0.3s ease; /* 过渡效果 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 内阴影 */
}
.title-input:focus,
.content-input:focus {
  outline: none; /* 去掉默认的聚焦样式 */
  border-color: #007aff; /* 聚焦时边框颜色 */
  background-color: #fff; /* 聚焦背景色 */
  box-shadow: 0 0 6px rgba(0, 122, 255, 0.4); /* 聚焦时阴影 */
}
.title-input {
  height: 50px; /* 标题输入框高度 */
}
.content-input {
  height: 150px; /* 内容输入框高度 */
}
.char-count {
  font-size: 14px; /* 字体大小 */
  color: #666; /* 字体颜色 */
  margin-top: 5px; /* 顶部间距 */
  text-align: right; /* 文本右对齐 */
  padding-left: 5px;
}
.upload-section {
  margin-bottom: 20px; /* 底部间距 */
}
.media-grid {
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  gap: 10px; /* 项目之间的间距 */
  margin-top: 10px; /* 顶部间距 */
}
.media-item {
  position: relative; /* 设置相对定位 */
  width: 100%; /* 宽度填充父容器 */
  padding-top: 100%; /* 保持正方形比例 */
  background-color: #f0f0f0; /* 背景色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 8px; /* 圆角 */
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  overflow: hidden; /* 内容溢出隐藏 */
}
.media-image {
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充方式 */
  border-radius: 6px; /* 圆角 */
}
.media-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-color: #000; /* 视频背景色 */
}
.add-btn {
  font-size: 24px; /* 字体大小 */
  color: #999; /* 字体颜色 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete-btn {
  position: absolute;
  top: 5px; /* 距离顶部的距离 */
  right: 5px; /* 距离右侧的距离 */
  width: 20px; /* 宽度 */
  height: 20px; /* 高度 */
  background-color: red; /* 背景色 */
  color: white; /* 字体颜色 */
  border-radius: 50%; /* 圆形 */
  font-size: 14px; /* 字体大小 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-limit {
  font-size: 12px; /* 字体大小 */
  color: #999; /* 字体颜色 */
  margin-top: 5px; /* 顶部间距 */
}
.submit-btn {
  width: 100%; /* 宽度填充父容器 */
  padding: 15px; /* 内边距 */
  background-color: #007aff; /* 背景色 */
  color: white; /* 字体颜色 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文本居中 */
  border: none; /* 去掉边框 */
  border-radius: 8px; /* 圆角 */
}
</style>
